<!--
 * @Author: your name
 * @Date: 2022-03-19 20:05:09
 * @LastEditTime: 2022-04-09 14:44:05
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \blog_web\src\views\diary\Diary.vue
-->
<template>
  <div class="diary">
    <p>
      这里的只属于你自己的秘密，累就就来这里发表一下自己的感受吧！不要悲伤，世界是爱你的，我也是爱你的！
    </p>
    <!-- 发布日记 -->
    <el-button type="success" @click="releaseDiary" class="release-btn"
      >写日记</el-button
    >
    <!-- 日记的显示 -->
    <template v-if="diaryList.length > 0">
      <el-timeline>
        <el-timeline-item
          v-for="item in diaryList"
          :key="item.id"
          :timestamp="formatTime(item.create_time)"
          placement="top"
        >
          <el-card class="card" shadow="hover">
            <div class="card-wrap">
              <div class="image-wrap">
                <el-image
                  style="width: 60px; height: 60px"
                  :src="item.cover_img"
                  :preview-src-list="[item.cover_img]"
                >
                </el-image>
                <span class="content">内容：{{ item.content }}</span>
              </div>

              <el-button
                type="danger"
                @click="deleteDiary(item, index)"
                size="small"
                class="btn"
                >删除</el-button
              >
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </template>
    <!-- 发布的组件 -->
    <release :releaseDialogVisible.sync="releaseDialogVisible" />
  </div>
</template>

<script>
// 导入组件
import Release from './release/release.vue'
// 导入接口
import { getDiaryList, deleteDiary } from '@/api/diary.js'
export default {
  name: 'Diary',
  components: {
    Release
  },
  data() {
    return {
      diaryList: [],
      releaseDialogVisible: false
    }
  },
  created() {
    this.getDiaryList()
  },
  methods: {
    // 发布日记
    releaseDiary() {
      this.releaseDialogVisible = true
    },
    // 获取日记的列表
    getDiaryList() {
      getDiaryList({ user_id: 3 }).then((res) => {
        console.log('res======', res)
        if (res.code == 200) {
          this.diaryList = res.result
        }
      })
    },
    // 删除日记
    deleteDiary() {
      this.$confirm(`将删除该日记, 是否继续?`, '删除', {
        type: 'warning'
      }).then(() => {
        deleteDiary({ id: item.id }).then((res) => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getMessages()
          }
        })
      })
    },
    // 处理时间
    formatTime(time) {
      return this.$moment(time).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-timeline {
  padding: 0;
}
.release-btn {
  margin-bottom: 20px;
}
.card {
  .card-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .image-wrap {
      .content {
        vertical-align: top;
        margin-top: 10px;
      }
    }
  }
}
</style>
